<template>
    <show-modal :title="title" :loading="loading" width="500px" @cancel="cancel" @submit="submit">
        <a-form-model ref="form" :model="form" :rules="rules" v-bind="layout">
            <!-- <a-form-model-item label="层级编码" prop="nodeCode">
                <a-input v-model.trim="form.nodeCode" :disabled="form.id?true:false" placeholder="请填写层级编码"/>
            </a-form-model-item> -->
            <a-form-model-item label="层级名称" prop="nodeName">
                <a-input v-model.trim="form.nodeName" :disabled="isDisabled" placeholder="请填写层级名称"/>
            </a-form-model-item>
            <a-form-model-item label="审核人" prop="leaderId">
                <a-select
                    v-model="form.leaderId"
                    class="form_item"
                    :disabled="isDisabled"
                    show-search
                    option-filter-prop="children"
                    :filter-option="filterOption"
                    mode="multiple"
                    allowClear
                    placeholder="请选择审核人">
                    <a-select-option :value="item.userId+''" v-for="item in userList" :key="item.userId">{{item.userName}}</a-select-option>
                </a-select>
            </a-form-model-item>
            <a-form-model-item label="层级内容" prop="content">
                <a-textarea placeholder="请输入层级内容" :disabled="isDisabled" :max-length="200" v-model="form.content" />
            </a-form-model-item>
            <a-form-model-item label="层级附件" prop="content">
                <upload-file :list="form.nodeImageUrl" :disabled="isDisabled" @upload="upload" @delete="deleteFile"/>
            </a-form-model-item>

            <!-- <a-form-model-item label="层级标签" prop="nodeMark">
                <a-input v-model.trim="form.nodeMark" :disabled="isDisabled" placeholder="请填写层级标签"/>
            </a-form-model-item>
            <a-form-model-item label="执行地点" prop="address">
                <a-input v-model.trim="form.address" :disabled="isDisabled" placeholder="请填写执行地点"/>
            </a-form-model-item> -->
            <a-form-model-item v-if="index>0 && type=='A'" label="审核打分" prop="score">
                <a-input-number placeholder="请输入审核打分" :precision="1" :min="0" :step="1" :disabled="isDisabled" class="form_item" v-model="form.score" />
                <!-- <p class="tip_number">只可输入整数</p> -->
            </a-form-model-item>
            <template v-if="type=='A' && index==0">
                <a-form-model-item label="提交时段" prop="times">
                    <a-range-picker
                        :disabled="isDisabled"
                        style="width:100%;"
                        v-model="form.times"
                        :disabled-date="disabledDate"
                        :show-time="{ format: 'HH:mm:ss' }"
                        valueFormat="YYYY-MM-DD HH:mm:ss"
                        :placeholder="['开始时间', '延期时间']"/>
                </a-form-model-item>
                <a-form-model-item label="结束时间" prop="lastTime">
                    <a-date-picker
                        :disabled="isDisabled"
                        :disabled-date="endDate"
                        v-model="form.lastTime"
                        class="form_item"
                        valueFormat="YYYY-MM-DD HH:mm:ss"
                        show-time
                        placeholder="结束时间"
                        >
                    </a-date-picker>
                </a-form-model-item>
                <a-form-model-item label="基础积分" prop="score">
                    <a-input-number placeholder="请输入基础积分" :min="0" :precision="1" :step="1" :disabled="isDisabled" class="form_item" v-model="form.score" />
                    <!-- <p class="tip_number">只可输入整数</p> -->
                </a-form-model-item>
                <a-form-model-item label="延期扣分" prop="deduction">
                    <a-input-number placeholder="请输入延期扣分" :min="0" :max="form.score" :precision="1" :step="1" :disabled="isDisabled" class="form_item" v-model="form.deduction" />
                    <!-- <p class="tip_number">只可输入整数</p> -->
                </a-form-model-item>
            </template>
            <!-- <a-form-model-item label="基础积分" prop="score">
                <a-input-number placeholder="请输入基础积分" :min="0" :max="100" :precision="0" :step="1" :disabled="isDisabled" class="form_item" v-model="form.score" />
            </a-form-model-item> -->

        </a-form-model>

    </show-modal>
</template>
<script>
import {rules} from './node-rules'
import {deepClone} from '@/utils'
const moment = require('moment');
import {addNodeInfo,updateNodeInfo} from '@/api/workorder'
import UploadFile from '@/components/uploadFile'

export default {
    name:'NodeInfo',
    components:{
        UploadFile
    },
    props:{
        orderId:{
            type:String | Number,
            default:'',
        },
        info:{
            type:Object,
            default:()=>{}
        },
        userList:{
            type:Array,
            default:()=>[]
        },
        isDisabled:{
            type:Boolean,
            default:false
        },
        type:{
            type: String,
            default:''
        },
        list:{
            type:Array,
            default:()=>[]
        },
        index:{
            type:Number | String,
            default:''
        },
        isCycle:{
            type:String,
            default:'N',
        }
    },
    data(){
        return{
            loading: false,
            rules,
            title: '层级信息',
            maxDate:28,
            form:{
                // nodeCode:'',
                nodeName:'',
                content:'',
                times:[],
                score:0,
                deduction:0,
                startTime:'',
                endTime:'',
                lastTime:'',
                num1:undefined,
                num2:undefined,
                num3:undefined,
                nodeImageUrl:[],
                leaderId:[],
                leaderName:[]
            },
            // disabledDate(current) {
            //     return current && current <= moment().subtract(1, 'days').endOf('day')
            // },
            // endDate(current){
            //     return current && current <= moment().subtract(1, 'days').endOf('day')
            // },
            layout: {
                labelCol: { span: 5 },
                wrapperCol: { span: 19 }
            },
        }
    },
    created(){
        this.form.orderId = this.orderId;
        this.form = {...this.form,...this.info};
        this.form.index = this.index;
        let {leaderId='',startTime,endTime,score,nodeImageUrl} = this.info;
        if(score){
            this.form.score = Number(score)
        }
        if(leaderId){
            this.form.leaderId = leaderId.split(',')
        }else{
            if(this.list.length){
                let firstNode = this.list[0];
                let firstLeaderId = firstNode.leaderId;
                this.form.leaderId = firstLeaderId.split(',')
            }
        }
        if(startTime){
            this.form.times = [startTime,endTime]
        }
        if(nodeImageUrl){
            this.form.nodeImageUrl = nodeImageUrl.split(',')
        }else{
            this.form.nodeImageUrl = []
        }
        
    },
    methods:{
        disabledDate(current) {
            let lastTime = this.form.lastTime;
            if(!lastTime){
               return current && current <= moment().subtract(1, 'days').endOf('day') 
            }
            return current && current >= moment(lastTime).endOf('day')
        },
        endDate(current){
            let times = this.form.times;
            if(times && times.length){
                return current && current <= moment(times[1]).endOf('day')
            }
            return current && current <= moment().subtract(1, 'days').endOf('day')
        },
        submit(){
            this.$refs.form.validate(async valid => {
                if (valid) {
                    try {
                        let res = null;
                        this.loading = true;

                        let form = deepClone(this.form);
                        let {times,leaderId,nodeImageUrl} = form;
                        if(times && times.length){
                            let start = times[0]
                            let end = times[1]
                            form.startTime = moment(start).format('YYYY-MM-DD HH:mm:ss');
                            if(this.type=="A"){
                                form.endTime = moment(end).format('YYYY-MM-DD HH:mm:ss');
                            }else{
                                form.lastTime = moment(end).format('YYYY-MM-DD HH:mm:ss');
                            }
                        }
                        form.nodeImageUrl = form.nodeImageUrl.join(',')
                        let leaderName = [];
                        this.userList.map(user=>{
                            leaderId.map(leader=>{
                                if(user.userId==leader){
                                    leaderName.push(user.userName)
                                }
                            })
                        })
                        form.leaderName = leaderName.join(',');
                        form.leaderId = form.leaderId.join(',')
                        // if (form.id) {
                        //     res = await updateNodeInfo(form);
                        // } else {
                        //     res = await addNodeInfo(form);
                        // }
                        this.$emit('submit',form);
                    } finally {
                        this.loading = false
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        upload(info){
            let {imgUrl} = info;
            this.form.nodeImageUrl.push(imgUrl)
        },
        deleteFile(index){
            this.form.nodeImageUrl.splice(index,1)
        },
        cancel(){
            this.$emit('cancel')
        },
        filterOption(input, option) {
            return (
                option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
            );
        },
    }
}
</script>